<template>
    <div>
        <ToolBar>

            <div style="float: right">
                <el-input
                    placeholder="搜索权限"
                    size="small"
                    style="width: 140px"
                    v-model="searchName"
                    clearable>
                </el-input>
            </div>
        </ToolBar>
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="permissionData"
            border
            ref="permissionsList"
            height="760"
            :default-sort = "{prop: 'date', order: 'descending'}"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="Id"
                sortable
                width="90">
            </el-table-column>
            <el-table-column
                prop="name"
                sortable
                label="权限名称">
            </el-table-column>
            <el-table-column
                prop="description"
                label="权限描述">
                <div slot-scope="scope">
                    {{ scope.row.description ? scope.row.description : '暂无描述' }}
                </div>
            </el-table-column>
            <el-table-column
                prop="group_name"
                label="权限分组"
                :filter-method="filterGroup"
                :filters="group"
            >
            </el-table-column>
            <el-table-column
                prop="created_at"
                sortable
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updated_at"
                sortable
                label="修改时间">
            </el-table-column>
        </el-table>
        <Paginate
            api="getPermissions"
            :params="params"
            :refresh="refresh"
            @val-change="PaginateData"
        >
        </Paginate>
    </div>
</template>

<script>
    import ToolBar from '../../../components/ToolBar.vue';
    import Paginate from '../../../components/Paginate'

    export default {
        data() {
            return {
                searchName: '',
                permissionData: [],
                group: [],
                params: {
                    search: []
                },
                refresh: false,
                loading: true
            }
        },
        methods: {
            PaginateData(list) {
                this.permissionData = list.list
                this.group = list.group
                this.loading = false
            },

            filterGroup(value, row) {
                return row.group_name === value;
            },

        },
        watch: {
            'searchName': {
                handler: function () {
                    let tableRow = this.$refs.permissionsList.$el.querySelectorAll('tbody tr');

                    let tableRowHeight = tableRow[1].offsetHeight;
                    let isjump = false;
                    for (let i = 0; i < this.permissionData.length; i++) {
                        if (this.searchName && this.permissionData[i].name.indexOf(this.searchName) != -1) {
                            tableRow[i].style.backgroundColor = '#85ce61';
                            if (!isjump) {
                                scrollTo(0, i * tableRowHeight + 50);
                                isjump = true;
                            }
                        } else {
                            tableRow[i].style.backgroundColor = '#fff';
                        }
                    }
                }

            }
        },
        mounted: function () {

        },
        components: {
            ToolBar, Paginate
        }
    }
</script>
